<template>
  <el-container class="header_container">
    <el-header class="header" style="height: 70px">
      <div class="header_menu_box">
        <el-row :gutter="20">
          <!-- 头部图片 -->
          <el-col :span="2">
            <div class="header_menu_logo">
              <a href="/">
                <img class="head-logon" src="../assets/fish.png" />
              </a>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="title">
              <h1>咸鱼商城</h1>
            </div>
          </el-col>
          <!-- <el-col :span="2" :offset="5">
            <div class="menu-title">
              <a href="/">首页</a>
            </div>
          </el-col> -->
          <el-col :span="2" :offset="7">
            <div class="menu-title">
              <a href="/product">商品</a>
            </div>
          </el-col>
          <el-col :span="6" :offset="3" v-if="!isLogin">
            <div class="menu-button">
              <el-button plain type="danger">
                <a href="/login">登陆</a>
              </el-button>
              <el-button plain type="primary">
                <a href="/register">注册</a>
              </el-button>
            </div>
          </el-col>
          <el-col :span="2" v-if="isLogin">
            <div class="menu-title">
              <a href="/order">订单</a>
            </div>
          </el-col>
          <el-col :span="3" v-if="isLogin">
            <div class="menu-title">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ user.username }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">更改信息</el-dropdown-item>
                  <el-dropdown-item command="2">修改密码</el-dropdown-item>
                  <el-dropdown-item command="3">地址信息</el-dropdown-item>
                  <el-dropdown-item command="4">购物车</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-header>

    <el-main>
      <hr class="header-hr" />
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      user: {}
    };
  },
  mounted() {

      const user = window.sessionStorage.getItem("user");

      if(user){

          this.isLogin = true;
          this.user = this.$qs.parse(user);
      }
  },
  methods: {
    //跳转路由
    handleCommand(command) {
      if (command == 1) {
        this.$router.push({ path: "/userinfo" });
      } else if (command == 2) {
        this.$router.push({ path: "/changePwd" });
      } else if (command == 3) {
        this.$router.push({ path: "/address" });
      } else if (command == 4) {
        this.$router.push({ path: "/car" })
      }
    }
  }
};
</script>

<style  lang="less" scoped>
.header_container {
  height: 100%;
}
.header_menu_box {
  width: 60%;
  margin: auto;
  /* background-color: blanchedalmond; */
}
.header-hr {
  width: 60%;
  position: relative;
  top: -28px;
}
/* 头部图片与商城名 */
.header_menu_logo {
  text-align: center;
  margin-top: 13px;
}
.head-logon {
  max-height: 50px;
}
/* 头部导航 */
.menu-title {
  margin-top: 21px;
  font-weight: 500;
  font-size: 20px;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: #409eff;
}
/* 头部按钮 */
.menu-button {
  margin-top: 15px;
}
.el-dropdown-link {
  font-weight: 500;
  font-size: 18px;
}
</style>
